<template>
  <div class="play">
    <van-nav-bar :title="playName" left-arrow @click-left="onClickLeft">
      <template>
        <van-icon name="share-o" size="18" />
      </template>
    </van-nav-bar>
    <div class="tu" :class="{ tuActive: isPlaying }">
      <img :src="coverImage" alt="" />
    </div>

    <div class="footer">
      <audio
        :src="playUrl"
        controls="controls"
        autoplay
        @play="play"
        @pause="pause"
      ></audio>
      <van-icon
        name="like"
        class="fav"
        @click="favMusic()"
        :color="favMusicData.indexOf(singleId) > -1 ? 'red' : ''"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      isPlaying: false,
      playUrl: "",
      singleId: "",
      coverImage: "",
      playName: "",
      favMusicData: [],
    };
  },
  created() {
    this.singleId = localStorage.getItem("singleId");
    // console.log(this.singleId);
    if (localStorage.getItem("favMusicData")) {
      // 如果本地存储favMusicData,直接赋值给this.favMusicData
      this.favMusicData = JSON.parse(localStorage.getItem("favMusicData"));
    }
    axios
      .get("http://localhost:3000/song/url?id=" + this.singleId)
      .then((res) => {
        // console.log(res.data.data[0].url);
        this.playUrl = res.data.data[0].url;
      });
    axios
      .get("http://localhost:3000/song/detail?ids=" + this.singleId)
      .then((res) => {
        // console.log(res.data.songs[0].name);
        this.playName = res.data.songs[0].name;
        this.coverImage = res.data.songs[0].al.picUrl;
      });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    play() {
      // console.log("play")
      this.isPlaying = true;
    },
    pause() {
      // console.log("pause")
      this.isPlaying = false;
    },
    favMusic() {
      var index = this.favMusicData.indexOf(this.singleId);
      if (index > -1) {
        // 若索引为-1删除进行取消收藏
        this.favMusicData.splice(index, 1);
      } else {
        // 将收藏的歌曲id存放入this.favMusicData中
        this.favMusicData.push(this.singleId);
      }
      localStorage.setItem("favMusicData", JSON.stringify(this.favMusicData));
    },
  },
};
</script>

<style>
.play {
  width: 100vw;
  height: 100vh;
}
.play::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(https://pic.3gbizhi.com/2020/0820/20200820122947668.jpg)
    no-repeat rgba(0, 0, 0, 0.5);
  background-size: cover;
  filter: blur(10px);
}
@keyframes xuan {
  from {
  }
  to {
    transform: rotate(360deg);
  }
}
.tu {
  width: 70vw;
  height: 70vw;
  border-radius: 50%;

  animation: xuan 10s linear infinite;
  animation-play-state: paused;
  position: absolute;
  top: -20%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url(https://s3.music.126.net/mobile-new/img/disc.png?d3bdd1080a72129346aa0b4b4964b75f=)
    no-repeat;
  background-size: contain;
}
.play .tuActive {
  animation-play-state: running;
}
.tu img {
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  box-sizing: border-box;
  box-shadow: 0 0 15px #f1e1e1;
}
.footer {
  position: absolute;
  width: 100vw;
  height: 8vh;
  bottom: 0;
}
.footer audio {
  width: 90vw;
  height: 100%;
}

.play .van-nav-bar .van-icon {
  color: #000 !important;
}
.play .van-nav-bar__title {
  color: #aaa;
}
.play .van-nav-bar {
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right, transparent, #ccc, transparent) 1 10;
}
.play .footer {
  background: #f1f3f4;
}
.play .fav {
  position: fixed;
  width: 10vw;
  height: 8vh;
  line-height: 8vh;
  text-align: center;
  color: #aaa;
  font-size: 20px;
  bottom: 0;
  right: 0;
  background: #f1f3f4;
  border-radius: 50%;
}
[class*="van-hairline"]::after {
  border: none !important;
}
</style>
